<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        @import url(./bucket.css);
        #cesiumContainer{
            position:absolute;
            height: 100%;
            width: 100%;
            /*cursor: url("../image/Pan.cur"),default;*/
        }
    </style>
</head>
<body>
<div id="toolbar" style="z-index: 999"></div>
<div id="cesiumContainer"></div>
<script src="../Apps/Sandcastle/Sandcastle-header.js"></script>
<script src="../Build/Cesium/Cesium.js"></script>
<script>
    var viewer = new Cesium.Viewer('cesiumContainer',{
        animation:true,
        timeline:true,
        baseLayerPicker:false
    });
    //Set bounds of our simulation time
    var start = Cesium.JulianDate.fromDate(new Date(2015, 2, 25, 16));
    var stop = Cesium.JulianDate.addSeconds(start, 360, new Cesium.JulianDate());
    //Make sure viewer is at the desired time.
    viewer.clock.startTime = start.clone();
    viewer.clock.stopTime = stop.clone();
    viewer.clock.currentTime = start.clone();
    viewer.clock.clockRange = Cesium.ClockRange.LOOP_STOP; //Loop at the end
    viewer.clock.multiplier = 10;
    //Set timeline to simulation bounds
    viewer.timeline.zoomTo(start, stop);
    // Set the view
    var target = Cesium.Cartesian3.fromDegrees(-103.0, 40.0);
    viewer.camera.lookAt(target, new Cesium.HeadingPitchRange(0, -90, 1750000));
    // Creates a sampled color property that transitions smmothly between blue and red.
    function createSampledProperty(startSeconds, stopSeconds, step) {
        var property = new Cesium.SampledProperty(Cesium.Color);
        for (var i = startSeconds; i <= stopSeconds; i += step) {
            var time = Cesium.JulianDate.addSeconds(start, i, new Cesium.JulianDate());
            if (i & 1) {
                property.addSample(time, Cesium.Color.RED);
            } else {
                property.addSample(time, Cesium.Color.BLUE);
            }
        }
        return property;
    }
    // Creates a time interval collection color property that blinks between blue and red.
    function createTimeIntervalCollectionProperty(startSeconds, stopSeconds, step) {
        var property = new Cesium.TimeIntervalCollectionProperty(Cesium.Color);
        for (var i = startSeconds; i <= stopSeconds; i += step) {
            var color;
            if (i & 1) {
                color = Cesium.Color.RED;
            } else {
                color = Cesium.Color.BLUE;
            }
            var timeInterval = new Cesium.TimeInterval({
                start : Cesium.JulianDate.addSeconds(start, i, new Cesium.JulianDate()),
                stop : Cesium.JulianDate.addSeconds(start, i+step, new Cesium.JulianDate()),
                isStartIncluded : true,
                isStopIncluded : false,
                data : color
            });
            property.intervals.addInterval(timeInterval);
        }
        return property;
    }
    // Creates a composite color property that alternates between constant and sampled behavior.
    function createCompositeProperty(startSeconds, stopSeconds, step) {
        var property = new Cesium.CompositeProperty(Cesium.Color);
        for (var i = startSeconds; i <= stopSeconds; i += step) {
            var color;
            if (i & 1) {
                property.intervals.addInterval(new Cesium.TimeInterval({
                    start : Cesium.JulianDate.addSeconds(start, i, new Cesium.JulianDate()),
                    stop : Cesium.JulianDate.addSeconds(start, i+step, new Cesium.JulianDate()),
                    isStartIncluded : true,
                    isStopIncluded : false,
                    data : new Cesium.ConstantProperty(Cesium.Color.RED)
                }));
            } else {
                property.intervals.addInterval(new Cesium.TimeInterval({
                    start : Cesium.JulianDate.addSeconds(start, i, new Cesium.JulianDate()),
                    stop : Cesium.JulianDate.addSeconds(start, i+step, new Cesium.JulianDate()),
                    isStartIncluded : true,
                    isStopIncluded : false,
                    data : createSampledProperty(i, i+step, step)
                }));
            }
        }
        return property;
    }
    // Creates a reference color property that references an ellipse with the given name.
    function createReferenceProperty(name) {
        var property = new Cesium.ReferenceProperty(viewer.entities, name, ['ellipse', 'material']);
        return property;
    }
    Sandcastle.addToolbarMenu([{
        text : 'Constant Material Property',
        onselect : function() {
            viewer.entities.removeAll();
            viewer.entities.add({
                position: target,
                name : 'Red ellipse with constant color',
                ellipse : {
                    semiMinorAxis : 250000.0,
                    semiMajorAxis : 400000.0,
                    material : Cesium.Color.RED
                }
            });
        }
    },{
        text : 'Sampled Property',
        onselect : function() {
            viewer.entities.removeAll();
            viewer.entities.add({
                position: target,
                name : 'Red ellipse with smoothly changing color',
                ellipse : {
                    semiMinorAxis : 250000.0,
                    semiMajorAxis : 400000.0,
                    material : new Cesium.ColorMaterialProperty(createSampledProperty(0, 360, 15))
                }
            });
        }
    },{
        text : 'Time Interval Collection Property',
        onselect : function() {
            viewer.entities.removeAll();
            viewer.entities.add({
                position: target,
                name : 'Red ellipse with blinking color',
                ellipse : {
                    semiMinorAxis : 250000.0,
                    semiMajorAxis : 400000.0,
                    material : new Cesium.ColorMaterialProperty(createTimeIntervalCollectionProperty(0, 360, 15))
                }
            });
        }
    },{
        text : 'Reference Property',
        onselect : function() {
            viewer.entities.removeAll();
            // Add another entity to reference color from
            viewer.entities.add({
                position: Cesium.Cartesian3.fromDegrees(-111.0, 40.0),
                id : 'Referenced',
                ellipse : {
                    semiMinorAxis : 100000.0,
                    semiMajorAxis : 100000.0,
                    material : new Cesium.ColorMaterialProperty(createTimeIntervalCollectionProperty(0, 360, 15))
                },
                label : {
                    text : "reference",
                    pixelOffset : new Cesium.Cartesian2(0, -55)
                }
            });
            viewer.entities.add({
                position: target,
                name : 'Ellipse with referenced color',
                ellipse : {
                    semiMinorAxis : 250000.0,
                    semiMajorAxis : 400000.0,
                    material : createReferenceProperty('Referenced')
                }
            });
        }
    },{
        text : 'Composite Property',
        onselect : function() {
            viewer.entities.removeAll();
            viewer.entities.add({
                position: target,
                name : 'Red ellipse with complex color behavior',
                ellipse : {
                    semiMinorAxis : 250000.0,
                    semiMajorAxis : 400000.0,
                    material : new Cesium.ColorMaterialProperty(createCompositeProperty(0, 360, 15))
                }
            });
        }
    }]);
</script>
</body>
</html>
